<template>
    <div>
        <a-card title="土地建设项目表" :bordered="false">
            <a-form @submit="handleSubmit" class="form" layout="horizontal" :form="form">
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item label="项目编号">
                            <a-input
                                placeholder="请输入项目编号"
                                v-decorator="['project_number',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '请输入项目编号', whitespace: true}]}]"/>
                        </a-form-item>
                    
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="申请年度">
                            <a-select placeholder="请选择年份"
                                      v-decorator="[ 'year',{initialValue:dataInit.year},
                                       {rules: [{ required: true, message: '请选择年份'}]} ]">
                                <a-select-option value="2018">2018</a-select-option>
                                <a-select-option value="2019">2019</a-select-option>
                                <a-select-option value="2020">2020</a-select-option>
                                <a-select-option value="2021">2021</a-select-option>
                                <a-select-option value="2022">2022</a-select-option>
                                <a-select-option value="2023">2023</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="立项序号">
                            <a-input
                                placeholder="立项序号"
                                v-decorator="['serial_number',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '立项序号', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                
                <a-row class="form-row" :gutter="32">
                    <a-col :span="24">
                        <a-form-item label="项目名称">
                            <a-input
                                placeholder="项目名称"
                                v-decorator="['name',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '项目名称', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item label="行政区划">
                            <a-cascader :options="options" @change="handleDivisonChange"
                                        v-decorator="['division',
                                        {initialValue: dataInit.division},
                                {rules: [{ required: false, message: '请选择项目行政区划'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="临近线路">
                            <a-select placeholder="临近线路"
                                      v-decorator="[ 'lines', {initialValue:dataInit.lines},
                                       {rules: [{ required: true, message: '临近线路'}]} ]">
                                <a-select-option v-for="item in linesData" :key="item.id" :value="item.name">
                                    {{item.name}}
                                </a-select-option>
                            
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="临近车站">
                            <a-select placeholder="临近车站"
                                      v-decorator="[ 'stations',{initialValue: dataInit.stations},
                                       {rules: [{ required: true, message: '临近车站'}]} ]">
                                <a-select-option v-for="(item,index) in stationsData" :key="index" :value="item.name">
                                    {{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item
                            label="土地级别">
                            <a-select placeholder="土地级别"
                                      v-decorator="[ 'land_level',{initialValue: dataInit.landLevel},
                                       {rules: [{ required: true, message: '土地级别'}]} ]">
                                <a-select-option v-for="(item, index) in landLevelData" :key="index" :value="item.name">
                                    {{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="16">
                        <a-form-item
                            label="四至边界">
                            <a-input
                                placeholder="四至边界"
                                v-decorator="['around_border',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '四至边界', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item
                            label="项目总用地面积">
                            <a-input
                                placeholder="项目总用地面积"
                                v-decorator="['project_area',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '项目总用地面积', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="基础设施配套程度">
                            <a-input
                                placeholder="基础设施配套程度"
                                v-decorator="['supporting_facilities',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '基础设施配套程度', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="开发方式">
                            <a-select placeholder="开发方式"
                                      v-decorator="[ 'development_method',{initialValue: dataInit.devMethod},
                                      {rules: [{ required: true, message: '开发方式'}]} ]">
                                <a-select-option
                                    v-for="(item,index) in devMethodData"
                                    :key="index"
                                    :value="item.name">{{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item
                            label="开发类型">
                            <a-select placeholder="开发类型"
                                      v-decorator="[ 'development_type',{initialValue: dataInit.devType},
                                       {rules: [{ required: true, message: '开发类型'}]} ]">
                                <a-select-option
                                    v-for="(item,index) in devTypeData"
                                    :key="index"
                                    :value="item.name">{{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="计划总投资">
                            <a-input
                                placeholder="计划总投资"
                                v-decorator="['planned_total_investment',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '计划总投资', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="计划投资强度">
                            <a-input
                                placeholder="计划投资强度"
                                v-decorator="['planned_investment_strength',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '计划投资强度', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="6">
                        <a-form-item
                            label="计划容积率">
                            <a-input
                                placeholder="计划容积率"
                                v-decorator="['planned_volume_rate',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '计划容积率', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item
                            label="计划办公生活比重">
                            <a-input
                                placeholder="计划办公生活比重"
                                v-decorator="['planned_proportion_of_office_life',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '计划办公生活比重', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item
                            label="计划建筑系数">
                            <a-input
                                placeholder="计划建筑系数"
                                v-decorator="['planned_building_coefficient',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '计划建筑系数', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-item
                            label="计划绿地率">
                            <a-input
                                placeholder="计划绿地率"
                                v-decorator="['planned_green_rate',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '计划绿地率', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="24">
                        <a-form-item
                            label="项目简要概况">
                            <a-textarea placeholder="项目简要概况"
                                        :autosize="{ minRows: 4, maxRows: 6 }"
                                        v-decorator="['project_description',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '项目简要概况', whitespace: true}]}]"/>
                        
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item
                            label="审批阶段">
                            <a-select placeholder="审批阶段"
                                      v-decorator="[ 'approval_stage',{initialValue: dataInit.approvalStage},
                                      {rules: [{ required: true, message: '审批阶段'}]} ]">
                                <a-select-option
                                    v-for="(item,index) in approvalStageData"
                                    :key="index"
                                    :value="item.name">
                                    {{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="开发项目审批文号">
                            <a-input
                                placeholder="开发项目审批文号"
                                v-decorator="['approval_docs_number',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '开发项目审批文号', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="审批结果">
                            <a-select placeholder="审批结果"
                                      v-decorator="[ 'approval_result',{initialValue: dataInit.approvalResult},
                                      {rules: [{ required: true, message: '审批结果'}]} ]">
                                <a-select-option
                                    v-for="(item, index) in approvalResultData"
                                    :key="index"
                                    :value="item.name">{{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="8">
                        <a-form-item
                            label="项目建设阶段">
                            <a-select placeholder="项目建设阶段"
                                      v-decorator="[ 'project_build_stage',{initialValue: dataInit.projectBuildStage},
                                      {rules: [{ required: true, message: '项目建设阶段'}]} ]">
                                <a-select-option
                                    v-for="(item, index) in projectBuildStageData"
                                    :key="index"
                                    :value="item.name">{{item.name}}
                                </a-select-option>
                            
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档日期">
                            <a-date-picker @change="createDateOnChange"
                                           style="width: 100%"
                                           v-decorator="['docs_create_date',
                                {rules: [{ required: true, message: '建档日期'}]}]"/>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item
                            label="建档人员">
                            <a-input
                                placeholder="建档人员"
                                v-decorator="['docs_creator',{initialValue:dataInit.test},
                                {rules: [{ required: true, message: '建档人员', whitespace: true}]}]"/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="32">
                    <a-col :span="24">
                        <a-form-item
                            label="项目文档">
                            <up-load-drag @change="handleUploadChange"></up-load-drag>
                        </a-form-item>
                    </a-col>
                </a-row>
                <!--                <a-button type="primary" :loading="loading" htmlType="submit">提交</a-button>-->
                <footer-tool-bar>
                    <a-button type="primary" :loading="loading" htmlType="submit">提交</a-button>
                </footer-tool-bar>
            </a-form>
        </a-card>
        <!--         fixed footer toolbar -->
    
    </div>
</template>

<script>

    import FooterToolBar from '@/components/tools/FooterToolBar'
    import cities from '@/db/cities'
    import indexedDB from '@/db/db'
    import moment from 'moment'
    import UpLoadDrag from '@/components/upload/UpLoadDrag'

    export default {
        name: "AddProject",
        components: {
            FooterToolBar,
            UpLoadDrag,
        },
        data() {
            return {
                options: cities,
                loading: false,
                form: this.$form.createForm(this),
                //
                dataInit: {
                    division: ['河南省', '郑州市', '金水区'],
                    year: '2019',
                    lines: '京广快速铁路',
                    stations: '郑州东站',
                    landLevel: '一级',
                    devMethod: '其他',
                    devType: '一般性',
                    approvalResult: '未通过',
                    approvalStage: '上报',
                    projectBuildStage: '未开建',
                    test: '123',
                },
                linesData: [],
                stationsData: [],
                landLevelData: [],
                devMethodData: [],
                devTypeData: [],
                approvalResultData: [],
                approvalStageData: [],
                projectBuildStageData: [],
                filesList:[]
            }
        },
        mounted() {
            this.dictionary()
        },
        methods: {
            dictionary() {
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(1), 'type_id')
                    .then(res => {
                        this.linesData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(2), 'type_id')
                    .then(res => {
                        this.stationsData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(3), 'type_id')
                    .then(res => {
                        this.landLevelData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(4), 'type_id')
                    .then(res => {
                        this.devMethodData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(5), 'type_id')
                    .then(res => {
                        this.devTypeData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(6), 'type_id')
                    .then(res => {
                        this.approvalStageData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(7), 'type_id')
                    .then(res => {
                        this.approvalResultData = res
                    })
                indexedDB.handleDataByIndex('dictionary', IDBKeyRange.only(8), 'type_id')
                    .then(res => {
                        this.projectBuildStageData = res
                    })
            },

            handleSubmit(e) {
                let that = this
                e.preventDefault()
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // indexedDB 不支持date格式  转换成字符串
                        values.docs_create_date = moment(values.docs_create_date).format('YYYY-MM-DD')
                        values.state = '待审核'
                        values.files = this.filesList
                        indexedDB.fileInsert({name: 'project'}, values).then(res => {
                                values.id = res
                                this.$success({
                                    title: `${values.name} 项目保存成功`,
                                    content: `点击确定返回`,
                                    onOk() {
                                        that.$router.push({name: 'ProjectManagement'})
                                    },
                                })

                            })
               
                    }
                })
            },
            handleUploadChange(list){
                // console.log(list)
                this.filesList = list
            },
            handleDivisonChange(e) {

            },
            createDateOnChange(e) {

            },
            
        },
    }
</script>

<style lang="scss" scoped>
    .card {
        margin-bottom: 24px;
    }
</style>